<template>
  <div :style="{'text-align': 'center','font-size':font_size,width:'1000px'}">
    <div style="font-size:2rem;font-weight:600;">
      <span>花价</span>
      <span v-if="server">· {{ server }}</span>
      <span v-if="map">· {{ map }}</span>
      <span v-if="species">· {{ species }}</span>
    </div>
    <el-row>
      <el-card style="width: 100%;margin: 1rem;">
        <el-row>
          <el-col :span="12">
            <el-row>
              <el-col class="primary-icon" :span="4">
                <div>命令</div>
                <div class="ver-line"></div>
              </el-col>
              <el-col :span="20">
                <div class="primary-title">
                  <div>
                    <span style="color:#999">查看花价：</span>
                    <span>花价 [区服] [地图] [种类]</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-row>
              <el-col class="primary-icon" :span="4">
                <div style="color: #999999;">说明</div>
                <div class="ver-line"></div>
              </el-col>
              <el-col :span="20">
                <div class="primary-content">
                  <div>1. 不输入区服时默认为当前群绑定的区服。</div>
                  <div>2. 如花价 唯满侠 广陵邑</div>
                  <div> 如花价 唯满侠</div>
                  <div> 如花价</div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <el-row>
      <el-table v-if="items && items.length" :data="items" stripe style="width: 100%">
        <el-table-column label="序号" width="60px">
          <template #default="scope">{{ scope.row.index }}</template>
        </el-table-column>
        <el-table-column label="物品">
          <template #default="scope">
            <div style="display: flex">
              <img :src="scope.row.img_url" :style="{height: '1.4rem'}" />
              <span :style="{'font-size':font_size,color:scope.row.color,'margin-left':'0.5rem'}">
                <span>{{ scope.row.name }}</span>
              </span>
              <span>
                <span>（</span>
                <span v-if="scope.row.color">{{ scope.row.color.join(' ') }}</span>
                <span v-else style="color:#cccccc">无色</span>
                <span>）</span>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售价" width="100px">
          <template #default="scope">{{ scope.row.price }}倍 </template>
        </el-table-column>
        <el-table-column v-for="(x,index) in Object.keys((items && items[0] && items[0].line) || {})" :key="x"
          :label="`分线·${x}`" width="150px">
          <template #default="scope">
            <div v-if="scope.row.line[x]" :style="{color:['#2a6e3f','#e18a3b','#945635','#108b96'][index]}">{{
              scope.row.line[x].join(' | ') }}</div>
            <div v-else style="color:#cccccc">无</div>
          </template>
        </el-table-column>
      </el-table>
      <el-empty v-else style="margin:auto" description="没有内容" />
    </el-row>
  </div>
</template>
<style lang="scss">
  .ver-line {
    height: 3rem;
    border: 1px solid #aaaaaa;
  }

  .primary-icon {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.4rem;
    display: flex;
    justify-content: space-evenly;
  }

  .primary-title {
    color: #ff0000;
    font-weight: 400;
    text-align: left;
    line-height: 1.4rem;
    font-size: 1.12rem;
  }

  .primary-content {
    color: #999;
    text-align: left;
    line-height: 1rem;
  }
</style>
<script>
  const { defineComponent, reactive, toRefs, ref, onMounted, computed } = Vue
  const component = defineComponent({
    components: {},
    setup () {
      const locale = computed(() => window.zhCn)
      onMounted(() => {
      })
      const methods = {
        parseTime,
        convertSci,
      }
      const items = computed(() => {
        const data = params_data.data
        const result = {}
        const item_order = {}
        Object.keys(data).map(map => {
          const item_list = data[map]
          item_list.map((item, index) => {
            if (!result[item.name]) result[item.name] = {
              name: item.name,
              color: item.color && item.color.split('，'),
              price: item.price,
              line: {} // 地图:分线
            }
            item_order[item.name] = index + 1 // 从1开始
            const x = result[item.name]
            x.line[map] = item.line // 为花的分线设置数据，考虑到不同分线同一种花属性一致，故仅记录分线号
          })
        })
        return Object.values(result)
          .sort((a, b) => item_order[a.name] - item_order[b.name])
          .map((x, index) => Object.assign({ index }, x))
      })
      const font_size = ref('0.8rem')
      return {
        data: [], // {id:'',price:0}
        server: '', // 唯我独尊
        map: '', // 广陵邑
        species: '', // 百合
        font_size,
        items,
        ...methods,
      }
    },
  })
</script>